<template>
  <el-container direction="vertical" style="padding: 10px; color: rgb(59, 69, 93)">
    <el-collapse-transition>
      <div v-show="show">
        <p class="h2-title" style="margin-bottom: 15px">流量压测场景配置</p>
        <el-form>
          <el-form-item label="场景:">
            <el-select @change="onSelectChange" v-model="form.sceneId">
              <el-option v-for="item in selectList" :key="item.id" :label="item.sceneName" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div class="always-shadow scroll">
          <div class="scroll-container" style="width: auto;">
            <div class="node-item scroll-item"  v-for="(item,index) in scrollList" :key="index">
               <p class="name">流程{{ index + 1}}</p>
               <p class="flow" :class="{'ellipsis' : item.nodeName.length > 6}" :title="item.nodeName.length > 6 ? item.nodeName : ''">{{item.nodeName}}</p>
               <div class="lines flex">
                 <div class="line-item" :style="{backgroundColor:index === 0 ? 'transparent' : '#000'}"></div>
                 <div class="center-round"></div>
                 <div class="line-item" :style="{backgroundColor:index ===  scrollList.length - 1 && index !== 0 ? 'transparent' : '#000'}"></div>
               </div>
               <div class="nodeCapacity" :title="item.nodeCapacity">
                 {{item.nodeCapacity}}
               </div>
            </div>
            <div v-if="scrollList.length == 0">
              <el-empty description="暂无数据"></el-empty>
            </div>
          </div>
        </div>
        <el-form style="margin-top: 15px;" :model="form" ref="myForm" :rules="rules" label-position="left" label-width="90px">
          <el-row>
            <el-col :span="9">
              <el-form-item label="集装箱:" prop="packingNum">
                <el-input v-model="form.packingNum" clearable type="number">
                  <template slot="append">标准集装箱(TEU)</template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="9" :offset="1">
              <el-form-item label="干散货:" prop="tonnageNum">
                <el-input v-model="form.tonnageNum" clearable type="number">
                  <template slot="append">吨</template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col>
              <el-form-item label="压测目的:" prop="llycMd">
                <el-input type="textarea" v-model="form.llycMd" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col>
              <el-button type="primary" @click="start">开始压测</el-button>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </el-collapse-transition>
    <el-main class="nopadding main">
      <p class="h2-title">压测任务列表</p>
      <el-form inline style="margin-top: 15px;">
        <el-form-item label="场景名称:">
          <el-input v-model="tableForm.sceneName" clearable></el-input>
        </el-form-item>
        <el-form-item label="计算状态:">
          <el-select v-model="tableForm.llYcJszt" clearable filterable>
            <el-option v-for="item in computedStateList" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="提交人:">
          <el-input v-model="tableForm.createUser" clearable></el-input>
        </el-form-item>
        <el-form-item label="提交时间:">
          <el-date-picker
                clearable
                unlink-panels
                type="daterange"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                v-model="timeValue"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
              </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button plain @click="resetTableForm">重置</el-button>
          <el-button type="primary" @click="queryTableList">搜索</el-button>
          <el-button type="primary" @click="show = !show">{{show ? '收起' : '新增压测任务'}}</el-button>
        </el-form-item>
      </el-form>
      <el-table border :data="tableList" v-loading="loading">
        <el-table-column align="center" label="序号" width="50" show-overflow-tooltip type="index"></el-table-column>
        <el-table-column align="center" prop="sceneName" label="场景名称" show-overflow-tooltip></el-table-column>
        <el-table-column align="center" prop="llycMd" label="压测目的" show-overflow-tooltip></el-table-column>
        <el-table-column align="center" label="模拟入参" min-width="200" show-overflow-tooltip>
          <template slot-scope="scope">
            <div style="display: flex;width: 100%;">
              <div style="width: 50%;text-align: center;">{{scope.row.packingNum}}箱TEU</div>
              <div style="width: 50%;text-align: center;">{{scope.row.tonnageNum}}吨干散货</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="计算状态" show-overflow-tooltip>
          <template slot-scope="scope">
            <span :style="{color:scope.row.llycJszt  === '1' ? 'rgb(129,179,55)' : '#000'}">{{scope.row.llycJszt  === '1' ? '模拟计算中......' : '已完成'}}</span>
          </template>
        </el-table-column>
        <el-table-column width="200"  label="计算结果(节点表示情况)" show-overflow-tooltip>
          <template slot-scope="scope">
            <div class="result-list" style="display: flex;justify-content: space-evenly;" v-if="scope.row.llycJsjgResp">
              <span class="result-item result-normal">流畅:{{scope.row.llycJsjgResp.isSuccess}}</span>
              <span class="result-item result-warning">风险:{{scope.row.llycJsjgResp.isRisk}}</span>
              <span class="result-item result-dange">超标:{{scope.row.llycJsjgResp.isStandard}}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="createUser" label="提交人"></el-table-column>
        <el-table-column align="center" prop="createTime" label="提交时间" show-overflow-tooltip></el-table-column>
        <el-table-column align="center" label="操作" width="180">
          <template slot-scope="scope">
            <!-- :disabled="scope.row.llycJszt === '1'" -->
            <el-button type="primary" :disabled="scope.row.llycJszt === '1'"  @click="viewTask(scope.row)">查看</el-button>
            <el-button type="primary" plain @click="delItem(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="height: 50px;display: flex;align-items: center;justify-content: center;">
        <el-pagination background layout="prev, pager, next" :total="countTotal" @current-change="onPageChange"></el-pagination>
      </div>
    </el-main>
  </el-container>
</template>

<script>
  import {formatDate,openMessage} from '@/utils'
  export default {
    data() {
      return {
        selectList:[],
        loading:false,//加载
        countTotal:0,//总条数
        form:{
          sceneId:0,
          llycMd:'',//流量压测目的
          packingNum:'',//装箱数
          tonnageNum:'',//吨数
        },
        show:false,
        tableList:[],//表格数据
        scrollList: [],
        rules:{
          llycMd:[{required:true,message:'请输入压测目的',trigger:'blur'}],
          packingNum:[{required:true,message:'请输入装箱数',trigger:'blur'}],
          tonnageNum:[{required:true,message:'请输入吨数',trigger:'blur'}],
        },
        // 表格分页查询数据
        tableForm:{
          pageNum: 1,
          pageSize: 10,
          sceneName:'',//场景名称
          llYcJszt:'',//计算状态
          createUser:'',//提交人
          startTime:'',//开始时间
          endTime:'',//截止时间
        },
        timeValue:'',
        computedStateList:[],//计算状态
      };
    },
    methods: {
      // 查看详情
      viewTask(item) {
        this.$router.push({
          path:'/stress/viewTask',
          query:{
            id:item.id,
            packingNum:item.packingNum,//装箱数
            tonnageNum:item.tonnageNum,//集散货
          }
        })
      },
      indexMethod(index) {
        return index = this.tableList.length - index
      },
      onSelectChange(e) {
        this.form.sceneId = e
        this.showDetail()
      },
      onPageChange(e) {
        this.tableForm.pageNum = e
        this.queryTableList()
      },
      // 删除
      delItem(item) {
        this.$confirm('您确定要删除吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$request({
            url: '/hnzc/ylcs/flow/delete',
            method: 'get',
            params: {
              id: item.id
            }
          }).then(({
            code
          }) => {
            if (code === 200) {
              openMessage('删除成功','success')
              this.queryTableList()
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      // 开始压测
      start() {
        this.$refs.myForm.validate(valid => {
          if (valid) {
            this.$request({
              url:'/hnzc/ylcs/flow/insertAndSubmit',
              method:'post',
              data:this.form
            }).then(({code,data}) => {
              if (code === 200) {
                openMessage('压测成功','success')
                this.queryTableList()
                this.$refs.myForm.resetFields()
              }
            })
          }
        })
      },
      // 重置表单查询
      resetTableForm() {
        this.tableForm.sceneName = ''
        this.tableForm.llYcJszt = ''
        this.tableForm.createUser = ''
        this.tableForm.createUser = ''
        this.timeValue = ''
      },
      showDetail() {
        this.$request({
          url: `/hnzc/ylcs/jymn/hnzcSceneInfo/selectDetailById`,
          method: 'get',
          params: {
            id: this.form.sceneId
          }
        }).then(({
          code,
          data
        }) => {
          if (code === 200) {
            this.scrollList = data.nodeInfoList
            this.scrollList.forEach(item => {
              item.nodeName
            })
          }
        })
      },
      // 查询表格数据
      queryTableList() {
        if (this.timeValue instanceof Array) {
          this.tableForm.startTime = this.timeValue[0] + ' 00:00:00'
          this.tableForm.endTime = this.timeValue[1] + ' 23:59:59'
        }else {
          this.tableForm.startTime = this.tableForm.endTime = ''
        }
        this.loading = true
        this.$request({
          url: '/hnzc/ylcs/flow/queryPageList',
          method: 'post',
          data: this.tableForm
        }).then(({total,rows}) => {
          this.countTotal = total
          this.tableList = rows
          if (this.tableList && this.tableList.length > 0) {
            this.tableList.forEach(item => {
              item.createTime = formatDate(item.createTime)
            })
          }
          this.loading = false
        }).catch(() => {
          this.loading = false
        })
      },
      // 场景下拉数据加载
      querySelectList() {
        this.$request({
          url:'/hnzc/ylcs/jymn/hnzcSceneInfo/queryListByIfication2',
          method:'get',
          params:{
            ification:'1',
          },
        }).then(({code,data}) => {
          code === 200 && (this.selectList = data)
          console.log('this.selectList',this.selectList)
          this.form.sceneId = this.selectList[0].id
          if (this.form.sceneId) this.showDetail()
        })
      },
      // 计算状态
      queryComputedStateList () {
        this.$request({
          url: '/system/dict/data/type/ylcs_flow_jszt',
          method:'get',
        }).then(({code,data}) => {
          if (code === 200) {
              this.computedStateList = data
              let obj = {
                dictLabel:'所有',
                dictValue:'0'
              }
              this.computedStateList.unshift(obj)
          }
        })
      },
    },
    created() {
      this.queryTableList()
      this.querySelectList()
      this.queryComputedStateList()
    }
  };
</script>

<style lang="scss" scoped>
  @import '@/assets/styles/nodeStyle.scss';
  p {
    margin: 0;
    padding: 0;
  }

  .main {
    margin-top: 15px;
    border-top: 1px solid rgb(59, 69, 93);

    p {
      margin-top: 15px;
    }
  }

  .nopadding {
    padding: 0;
  }

  .h2-title {
    padding-left: 15px;
    border-left: 2px solid rgb(59, 69, 93);
    font-weight: 700;
  }

  .flex {
    display: flex;
  }
  .scroll-container {
    height: 100%;
    overflow-x: auto;
    &::-webkit-scrollbar {
      height: 12px;
      border-radius: 10px;
    }
    &::-webkit-scrollbar-thumb {
      border-radius: 6px; /* 设置滑块圆角 */
      background-color: rgb(165,169,183);
    }
    &::-webkit-scrollbar-track {
      border-radius: 5px;
      background-color: transparent; /* 设置滚动条滑块颜色 rgb(165,169,183)*/
    }
    .node-item{
      margin-bottom: 12px;
    }
  }

  li {
    list-style: none;
  }

  always-shadow {
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  }

  .scroll {
    border-radius: 4px;
    padding: 10px;
    border: 1px solid #ebeef5;
  }

  .txt-center {
    text-align: center;
  }
  .result-warning{
    color: rgb(231, 152, 58);
  }
  .result-dange{
    color: rgb(178, 62, 28);
  }
</style>
